<!--
 * @Author: your name
 * @Date: 2022-04-27 09:35:26
 * @LastEditTime: 2023-09-06 18:59:03
 * @LastEditors: wangwang 2723008256@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jzjy\src\views\ActiveCenter\index.vue
-->
<template>
  <div id="container">
    <!-- 个人信息不完善无法报名时的完善个人信息弹窗 -->
    <div class="userinfoBox">
      <el-dialog
        title=""
        :visible.sync="dialogTableVisible"
        :close-on-click-modal="true"
        :close-on-press-escape="true"
        :show-close="true"
        center
        width="650px"
      >
        <div class="chose">
          <h3>完善个人信息</h3>
          <el-form label-width="100px">
            <el-form-item label="昵称">
              <input
                v-model="ninckname"
                placeholder="请填写昵称"
                spellcheck="false"
              />
            </el-form-item>
            <el-form-item label="真实姓名">
              <input v-model="username" placeholder="请填写真实姓名" />
            </el-form-item>
            <el-form-item label="所在省市区">
              <div class="adreess" ref="box">
                <!-- @click="choseSSQ = !choseSSQ" 地区暂时不让更改，取消点击出现选择地区栏 -->
                <div class="indput">
                  <input
                    type="text"
                    @click="choseSSQ = !choseSSQ"
                    :value="adreess"
                  />
                  <i class="el-icon-arrow-down jiantou" v-if="!choseSSQ"></i>
                  <i class="el-icon-arrow-up jiantou" v-if="choseSSQ"></i>
                </div>
                <div class="adreessBox" v-show="choseSSQ">
                  <div class="preBox box">
                    <div
                      class="list"
                      v-for="item in provincecodeList"
                      :key="item.code"
                      @click="chosePre(item.code, item.name)"
                      :class="{ select_color: provincecode == item.code }"
                    >
                      <span>{{ item.name }}</span>
                      <i class="el-icon-arrow-right"></i>
                    </div>
                  </div>
                  <div class="cityBox box" v-if="cityList.length > 0">
                    <div
                      class="list"
                      v-for="item in cityList"
                      :key="item.code"
                      @click="choseCity(item.code, item.name)"
                      :class="{ select_color: citycode == item.code }"
                    >
                      <span>{{ item.name }}</span>
                      <i class="el-icon-arrow-right"></i>
                    </div>
                  </div>
                  <div class="areaBox box" v-if="areaList.length > 0">
                    <div
                      class="list"
                      v-for="item in areaList"
                      :key="item.code"
                      @click="choseArea(item.code, item.name)"
                      :class="{ select_color: areacode == item.code }"
                    >
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="所在学校">
              <el-select
                v-model="school"
                filterable
                allow-create
                placeholder="请选择"
                @change="changeSchool"
              >
                <el-option
                  v-for="item in schoolList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <!-- <div class="indput">
            <input type="text" disabled :value="school" />
          </div> -->
            </el-form-item>
            <!-- <el-form-item label="选择您的身份">
              <el-select
                v-model="shenfen_id"
                placeholder="请选择"
                @change="choseshenfen"
              >
                <el-option label="老师" value="1"></el-option>
                <el-option label="学生" value="2"></el-option>
                <el-option label="家长" value="3"></el-option>
              </el-select>
            </el-form-item> -->
            <div class="shenfen">
              <p>选择您的身份</p>
              <div style="margin-left:20px">
                <el-radio-group v-model="shenfen_id" size="medium">
                  <el-radio :label="1" text-color="#08a579">老师</el-radio>
                  <el-radio :label="2">学生</el-radio>
                  <el-radio :label="3">家长</el-radio>
                </el-radio-group>
              </div>
            </div>
            <el-form-item label="岗位职务" v-if="shenfen_id == 1">
              <el-select
                v-model="zhiwu_id"
                placeholder="请选择"
                @change="changeZhiwu"
              >
                <el-option
                  v-for="item in zhiwuList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否为班主任" v-if="shenfen_id == 1">
              <el-select
                v-model="isadviser"
                placeholder="请选择"
                @change="changeadviser"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所在年级">
              <el-select
                v-model="radio3"
                placeholder="请选择"
                @change="changeGrade"
              >
                <el-option
                  v-for="item in nianjiList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="submitSet" @click="submituserinfo">
            <span>提交</span>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { timeStamp2String } from "../../utils/time";
import {
  userinfo,
  bm_activity,
  loc_kefuewm,
  kemulists,
  nianjilists,
  setuserinfo,
  pca,
  school,
  list_systypes,
} from "../../api/http";
export default {
  inject: ["reload"],
  props: ["yymsg"],
  data() {
    return {
      timeStamp2String,
      active_id: 0, //活动id
      title: "", //顶部活动名称

      //报名相关
      signSuccess: false, //报名弹窗显示隐藏
      kfevm: "", //报名弹窗客服二维码

      actcyytxShow: true, //活动预约课程学习提醒弹窗

      dqkfevm: "", //地区客服二维码

      //完善个人信息内容
      dialogTableVisible: true,
      nianjiList: [], //可选年级列表
      classList: [], //学科列表
      radio3: "", //年级值
      radio1: "", //学科值
      ninckname: "", //昵称
      username: "", //真实姓名
      // adreess: (this.province = ""
      //   ? "请选择所在的省市区"
      //   : this.province + "/" + this.city + "/" + this.area), //所在省市区
      adreess: "",
      school: "", //所在学校
      school_id: "", //学校id
      schoolList: [], //可选学校列表
      provincecodeList: [], //省列表
      cityList: [], //市列表
      areaList: [], //区列表
      provincecode: "", //省id
      citycode: "", //市id
      areacode: "", //区id
      province: "", //省名称
      city: "", //市名称
      area: "", //区名称
      choseSSQ: false, //省市区选择框的显示隐藏
      zhiwuList: [], //职务列表
      shenfen: "", //1老师，2学生，3家长
      shenfen_id: "", //1老师，2学生，3家长
      isadviser: "0", //是否为班主任
      zhiwu_id: "", //岗位职务id
      oldzhiwu_id: "", //修改前职务id
      account: "", //账号
    };
  },
  created() {
    console.log(this.yymsg);
    //地区客服二维码
    loc_kefuewm({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res, "地区客服二维码");
      this.dqkfevm = res.retRes.kefu_file_url;
    });
    //获取职务分类列表
    list_systypes({
      md5key: localStorage.getItem("md5key"),
      type_str: "zhiwu",
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "职务列表");
        this.zhiwuList = res.retRes;
      }
    });
    //获取学校列表
    school({
      provincecode: this.provincecode,
      citycode: this.citycode,
      areacode: this.areacode,
    }).then((res) => {
      this.schoolList = [];
      console.log(res, "学校列表");
      if (res.retInt == 1) {
        const data = res.retRes;
        this.schoolList = data;
      }
    });
    //获取省市区数据
    pca({
      type: "p",
    }).then((res) => {
      console.log(res, "省份数据 ");
      this.provincecodeList = res.retRes;
    });
    //获取年级列表数据
    nianjilists({ md5key: localStorage.getItem("md5key") }).then((res) => {
      console.log(res, "年级列表");
      const data = res.retRes;
      if (res.retInt == 1) {
        this.nianjiList = data;
      }
    });
    //获取科目列表
    kemulists({ md5key: localStorage.getItem("md5key") }).then((res) => {
      console.log(res, "科目列表");
      const data = res.retRes;
      if (res.retInt == 1) {
        this.classList = data;
      }
    });
    userinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res);
        const data = res.retRes;
        this.ninckname = data.title;
        this.username = data.true_name;
        this.isadviser = JSON.stringify(data.is_bzr);
        this.nianji_id = this.radio3 = data.nianji_id;
        this.radio1 = data.kemu_id;
        this.zhiwu_id = data.zhiwu_id;
        this.oldzhiwu_id = data.zhiwu_id;
        this.account = data.account;
        this.shenfen_id = data.shenfen_id == 0 ? "" : data.shenfen_id;
      }
    });
  },
  mounted() {},
  updated() {},

  beforeDestroy() {},

  methods: {
    // //报名
    // baoming() {
    //   if (this.lh_status == 0) {
    //     //获取用户信息用于报名

    //   } else {
    //     this.$message({
    //       message: "您已被拉黑，无法执行此操作",
    //       type: "warning",
    //       duration: 1000,
    //       offset: 300,
    //     });
    //   }
    // },
    //选择省
    chosePre(code, name) {
      console.log(code);
      this.provincecode = code;
      this.province = name + "/";
      this.citycode = "";
      this.city = "";
      this.areacode = "";
      this.area = "";
      this.areaList = [];
      pca({
        type: "c",
        pcode: this.provincecode,
      }).then((res) => {
        console.log(res, "城市数据 ");
        this.cityList = res.retRes;
      });
    },
    //选择市
    choseCity(code, name) {
      this.citycode = code;
      this.city = name + "/";
      this.areacode = "";
      this.area = "";
      pca({
        type: "a",
        pcode: this.citycode,
      }).then((res) => {
        console.log(res, "地区数据 ");
        this.areaList = res.retRes;
      });
    },
    //选择区
    choseArea(code, name) {
      this.areacode = code;
      this.area = name;
      this.choseSSQ = false;
      this.adreess = this.province + this.city + this.area;
      school({
        provincecode: this.provincecode,
        citycode: this.citycode,
        areacode: this.areacode,
      }).then((res) => {
        this.schoolList = [];
        console.log(res, "学校列表");
        if (res.retInt == 1) {
          const data = res.retRes;
          this.schoolList = data;
          // this.schoolList.unshift({id:0,title:'手动输入'})
        } else if (res.retInt != 1) {
          this.$notify.error({
            title: "错误",
            message: res.retErr,
            duration: 2000,
            showClose: false,
          });
        }
      });
    },
    //选择学校
    changeSchool(e) {
      console.log(e, typeof this.school, this.school);
      if (typeof this.school == "string") {
        console.log("不存在的学校");
        console.log(this.school_id);
        //输入的不存在的学校就查询并创建
        if (this.provincecode == "") {
          this.$notify.error({
            title: "错误",
            message: "请先选择省市区",
            duration: 2000,
            showClose: false,
          });
        } else {
          checkschool({
            md5key: localStorage.getItem("md5key"),
            provincecode: this.provincecode,
            citycode: this.citycode,
            areacode: this.areacode,
            title: this.school,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "创建学校");
              this.school_id = res.retRes.id;
            } else {
              this.$notify.error({
                title: "错误",
                message: res.retErr,
                duration: 2000,
                showClose: false,
              });
            }
          });
        }
      } else if (typeof this.school == "number") {
        console.log("已存在的学校");
        this.school_id = e;
      }
    },
    //选择身份
    choseshenfen(e) {
      this.shenfen_id = e;
    },
    //选择是否为班主任
    changeadviser(e) {
      this.isadviser = e;
    },
    //选择职务
    changeZhiwu(e) {
      this.zhiwu_id = e;
    },
    //选择学校
    changeGrade(e) {
      console.log(e);
      this.nianji_id = e;
      this.radio3 = e;
    },
    //提交完善个人信息
    submituserinfo() {
      if (!this.username) {
        this.$message({
          message: "请填写真实姓名",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else if (!this.areacode) {
        this.$message({
          message: "请选择所在省市区",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else if (!this.school_id) {
        this.$message({
          message: "请选择所在学校",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else if (!this.nianji_id) {
        this.$message({
          message: "请选择所在年级",
          duration: 1000,
          showClose: false,
        });
      } else if (!this.shenfen_id) {
        this.$message({
          message: "请选择您的身份",
          duration: 1000,
          showClose: false,
        });
      } else if (this.shenfen_id == 1 && !this.isadviser) {
        this.$message({
          message: "请选择是否为班主任",
          duration: 1000,
          showClose: false,
        });
        if (!this.zhiwu_id) {
          this.$message({
            message: "请选择岗位职务",
            duration: 1000,
            showClose: false,
            offset: 300,
          });
        }
      } else if (this.shenfen_id == 1 && !this.zhiwu_id) {
        this.$message({
          message: "请选择岗位职务",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else {
        setuserinfo({
          md5key: localStorage.getItem("md5key"),
          school_id: this.school_id,
          kemu_id: this.radio1,
          nianji_id: this.radio3,
          zhiwu_id: this.zhiwu_id,
          is_bzr: this.isadviser,
          title: this.ninckname,
          true_name: this.username,
          account: this.account,
          provincecode: this.provincecode,
          citycode: this.citycode,
          areacode: this.areacode,
          shenfen_id: this.shenfen_id,
        }).then((res) => {
          if (res.retInt == 1) {
            this.dialogTableVisible = false;
            bm_activity({
              md5key: localStorage.getItem("md5key"),
              activity_id: this.yymsg.active_id,
              school_id: this.school_id,
              kemu_id: this.kemu_id,
              nianji_id: this.nianji_id,
              zhiwu_id: this.zhiwu_id,
              is_bzr: this.isadviser,
              title: this.ninckname,
              true_name: this.username,
              account: this.account,
              provincecode: this.provincecode,
              citycode: this.citycode,
              areacode: this.areacode,
            }).then((res) => {
              if (res.retInt == 1) {
                this.$emit("openSuccessTc");
              }
            });
          }
        });
      }
    },
  },
};
</script>
<style>
.el-dialog__headerbtn {
  /* color: #08a579; */
  position: absolute;
  top: 20px;
  right: 40px;
  width: 0;
  height: 0;
}
.el-dialog__headerbtn .el-dialog__close:hover {
  color: #08a579;
}
/* 用于弹窗 */
.el-button:hover {
  background: #fff;
  border-color: #08a579;
  color: #333;
}
.el-button--primary {
  background: #08a579 !important;
  border-color: #08a579 !important;
}
.el-button--primary:hover {
  background: #08a579 !important;
  border-color: #08a579;
  color: #fff;
}

/* 用于图片预览大图关闭按钮 */
.el-image-viewer__btn {
  opacity: 1;
}
</style>
<style lang="less" scoped>
#container {
  //首次弹出框的样式
  .userinfoBox {
    /deep/.el-radio__input.is-checked + .el-radio__label {
      color: #08a579 !important;
    }
    /* 选中后小圆点的颜色 */
    /deep/.el-radio__input.is-checked .el-radio__inner {
      background: #08a579 !important;
      border-color: #08a579 !important;
    }
    .chose {
      position: relative;
      margin-left: 40px;
      cursor: pointer;
      h3 {
        // margin: 10px 0;
        margin: 0 30px 20px 0;
        text-align: center;
      }
      .el-form {
        width: 400px;
        user-select: none;
      }
      .el-input {
        width: 400px;
      }
      .el-select {
        width: 400px;
      }
      /deep/.el-form-item__content {
        margin-left: 40px;
      }
      /deep/.el-form-item__label {
        text-align: left;
      }
      /deep/.el-cascader .el-input {
        width: 400px;
      }
      .indput {
        position: relative;
      }
      input {
        padding-left: 15px;
        color: #666;
        width: 382px;
        height: 30px;
        border: 0;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        outline: none;
        background: #fff;
        cursor: pointer;
      }
      .jiantou {
        position: absolute;
        top: 7px;
        right: -81px;
        color: #999;
        font-size: 15px;
      }
      .adreess {
        position: relative;
        .select_color {
          color: #08a579;
          font-weight: 600;
          i {
            color: #08a579;
          }
        }
        // .icon_style {
        //   transform: rotate(180deg);
        // }
        .adreessBox {
          display: flex;
          position: absolute;
          top: 40px;
          left: 0;
          z-index: 1000;
          background-color: #fff;
          box-shadow: 0px 0px 20px 4px #ccc;
          border-radius: 4px;
          transition: 1s;
          .box {
            margin-top: 10px;
            padding: 0px 15px 10px 40px;
            width: 170px;
            height: 250px;
            -ms-overflow-style: none; /* IE 10+ */
            scrollbar-width: none; /* Firefox */
            overflow-y: scroll;
            .list {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 40px;
              cursor: pointer;
            }
          }
          .preBox {
            border-right: 1px solid #ccc;
          }
          .cityBox {
            border-right: 1px solid #ccc;
          }
          ::-webkit-scrollbar {
            display: none; /* Chrome Safari */
          }
        }
      }
      p {
        margin: 20px 0;
        margin-bottom: 20px;
        color: #646566;
      }
      .shenfen{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        p{
          margin: 10px 0;
        }
      }
      .taps {
        display: flex;
        flex-wrap: wrap;
        .classRadio {
          display: flex;
          margin-right: 79px;
          .tips {
            position: relative;
            top: 2px;
            margin-right: 8px;
            width: 14px;
            height: 14px;
            border: 1px solid #cccccc;
            border-radius: 100%;
            line-height: 12px;
            text-align: center;
            span {
              display: inline-block;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%);
              width: 9px;
              height: 9px;
              background-color: #fff;
              border-radius: 100%;
            }
          }
          .tips2 {
            border: 1px solid #08a579;

            span {
              background-color: #08a579;
            }
          }
          p {
            margin: 0;
          }
        }
      }
      .tab2 {
        .classRadio {
          margin-bottom: 10px;
        }
      }
      .submitSet {
        position: absolute;
        right: 20px;
        bottom: -80px;
        width: 120px;
        height: 40px;
        background: #08a579;
        color: #fff;
        border-radius: 6px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
    }
    /deep/.el-dialog--center {
      border-radius: 10px;
      padding-bottom: 80px;
    }
    /deep/.el-dialog__header {
      padding: 0;
      padding-top: 20px;
    }
  }
}
</style>
